import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import useQuery from '@/hooks/useQuery';
import { addCodeupAppDeployTask, queryDeployRecord, queryReleasePlanDetail } from '@/service/deliver';
import { CodepenOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Button, Card, Descriptions, Space, Steps, Table, Tabs, Tag, Tooltip } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React, { useState } from 'react';
import LinkApp from './components/LinkApp';
import styles from './index.module.less';

const CustomButton = ({ onClick, text, danger }: { onClick?: any, text: string, danger?: boolean }) => {
  return <Tooltip placement='bottom' title={text}>
    <Button onClick={onClick} shape='round' danger={danger} type='default' style={{
      marginLeft: -28,
      marginTop: 28,

    }} >{text}</Button>
  </Tooltip>
}
const AddButton = ({ onClick }:any) => {
  return <Tooltip title='关联应用' placement='bottom'>
    <PlusOutlined onClick={onClick} className={styles.addButton} />
  </Tooltip>


}
const App = () => {
  const { data = [], refresh } = useRequest<any>(() => queryReleasePlanDetail({
    planId: query.planId,
    projectId: query.projectId
  }))
  const [activeKey, setActiveKey] = useState('1');
  const linkApp = useAntdModal({ refresh })
  const query = useQuery();
  const onDeploy = (data: any) => {

    addCodeupAppDeployTask({
      ...data,
      linkId: activeKey,
      projectId: query.projectId,
      planId: query.projectId,
    })
  }
   // @ts-ignore
  const app = data.find(v => v.appId === activeKey) || {}
  console.log({ app })
  return (<div>
    <Card>
      <LinkApp {...linkApp} />
      <Tabs
        tabBarExtraContent={<AddButton onClick={() => linkApp.openModal()} />}
        activeKey={activeKey}
        onChange={e => {
          if (e === 'new') {
          } else {

            setActiveKey(e);
          }
        } }
        // tabBarExtraContent={<Button shape='round'>关联应用</Button>}
        items={[...data.map((item: { appId: any; appName: any; }) => {
          return {
            key: item.appId,
            label: item.appName
          };
        }), { key: 'new', label: <AddButton onClick={() => linkApp.openModal()} /> }]} />
      <Steps
        size="small"
        current={1}
        items={[
          {
            title: '开发环境',
            description: <CustomButton onClick={() => onDeploy({ env: 'dev' })} text='部署开发' />
          },
          {
            title: '测试环境',
            description: <CustomButton onClick={() => onDeploy({ env: 'test' })} text='部署测试' />
          },
          {
            title: '预发环境',
            description: <CustomButton onClick={() => onDeploy({ env: 'fix' })} text='部署开发' />
          },
          {
            title: '生产环境',
            // description: <CustomButton onClick={() => onDeploy({ env: 'dev' })} text='部署开发' />
          }
        ]} />
     
      {/* <Steps.Step title="开发环境"
      description={
    <Steps.Step title="测试环境"
      description={<CustomButton onClick={() => onDeploy({ env: 'test' })} text='部署测试' />}
    />
    <Steps.Step title="预发环境"
      description={<CustomButton onClick={() => onDeploy({ env: 'fix' })} danger text='提交预发' />}
    />
    <Steps.Step title="生产环境" /> */}
  
  </Card><Card style={{ marginTop: 12 }}>

      <Descriptions title="应用详情">
        <Descriptions.Item label="版本创建人">{app.createdBy}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{app.createdAt}</Descriptions.Item>
        <Descriptions.Item label="应用类型"><Tag color='green'>{app.deployVersion}</Tag></Descriptions.Item>
        <Descriptions.Item label="版本分支"><Tag color='green'> {app.deployVersion}</Tag></Descriptions.Item>
        <Descriptions.Item label="代码仓库">{app.gitUrl}</Descriptions.Item>

      </Descriptions>
    </Card><Card style={{ marginTop: 12 }}>
      <DeployRecord />

    </Card>
  </div>)
}
const DeployRecord = () => {
  const { tableProps } = useAntdList(queryDeployRecord, {})
  const columns: ColumnsType<any> = [{
    title: '部署环境',
    dataIndex: 'deployEnv'
  }, {
    title: '部署分支',
    dataIndex: 'deployBranch'
  }, {
    title: '部署状态',
    dataIndex: 'deployStatus'
  }, {
    title: '创建人',
    dataIndex: 'createdBy'
  }, {
    title: '创建时间',
    dataIndex: 'createdAt'
  }, {
    title: '操作',
    render() {
      return <Space>
        <Button type="link">详情</Button>
        <Button type="link">重新部署</Button>
      </Space>
    }
  }
  ]
  return <Table rowKey='id' size='small' {...tableProps} columns={columns} />
}

export default App